<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul id="box1">
			<li>第1段话</li>
			<li>第2段话</li>
			<li>第3段话</li>
			<li>第4段话</li>
			<li>第5段话</li>
		</ul>
		<button type="button" id="add">添加一条新的访客信息</button>
		<button type="button" id="delAll">删除选中</button>
		<button type="button" id="sort">从小到大</button>
		<table id="table" border="1" cellspacing="0" cellpadding="10">
			<tr>
				<th>序列号</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>操作</th>
				<th>选择</th>
			</tr>
		</table>
		<script type="text/javascript">
			// 功能一
			var box1 = document.querySelector("#box1");
			setInterval(function() {
				var li = box1.firstElementChild.cloneNode(true);
				box1.removeChild(box1.firstElementChild);
				box1.appendChild(li);
			}, 1000)

			// 功能二
			var info = [{
					name: "胡杭",
					age: 16
				},
				{
					name: "胜明",
					age: 22
				},
				{
					name: "军毅",
					age: 21
				},
				{
					name: "晓华",
					age: 13
				},
				{
					name: "盛聪",
					age: 23
				},
				{
					name: "侦剑",
					age: 32
				},
				{
					name: "红翔",
					age: 25
				},
				{
					name: "超维",
					age: 18
				},
				{
					name: "士琪",
					age: 22
				},
				{
					name: "艳华",
					age: 20
				}
			];
			var table = document.querySelector("#table"),
				add = document.querySelector("#add"),
				delAll = document.querySelector("#delAll"),
				sort = document.querySelector("#sort");

			var i = 0,
				k = 1;
			// 添加
			add.addEventListener("click", function() {
				var tr = document.createElement("tr");
				if (i >= info.length) {
					i = 0;
				}
				tr.align = "center";
				tr.className = "tr";
				tr.innerHTML =
					`<td>${k++}</td><td>${info[i].name}</td><td>${info[i].age}</td><td><button>删除</button></td><td><input type="checkbox"></td>`;
				i++;
				table.appendChild(tr);
				
				// 删除按钮
				table.onclick = function(e){
					if(e.target.nodeName == "BUTTON"){
						table.removeChild(e.target.parentNode.parentNode);
					}
				}
			})
			// 删除
			delAll.addEventListener("click", function() {
				var checkbox = document.querySelectorAll("input:checked");
				checkbox.forEach(function(val) {
					table.removeChild(val.parentNode.parentNode);
				})
			})
			// 排序
			sort.addEventListener("click", function() {
				var tr = document.querySelectorAll("tr");
				tr = Array.from(tr).sort(function(a, b) {
					return a.children[2].innerText - b.children[2].innerText;
				}).forEach(function(val) {
					table.appendChild(val);
				})
			})
		</script>
	</body>
</html>
